<template>
    <div class="goodsinfo-container">
        <transition @before-enter="beforeEnter"
                    @enter="enter"
                    @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
        <!--商品轮播图区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbotu-list="goodsinfoList.img_list" :height="320"></swiper>
                </div>
            </div>
        </div>
        <!--商品购买区域-->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfoList.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">市场价：<del>￥{{goodsinfoList.market_price}}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{goodsinfoList.sell_price}}</span></p>
                    <p>购买数量：<numbox @getcount="getSelectedCount" :max="5"></numbox></p>

                    <p>
                        <mt-button size="small" type="primary">立即购买</mt-button>
                        <mt-button size="small" type="danger" @click="addToShopCar()">加入购物车</mt-button>
                        <!--分析：如何实现加入购物车的时候，拿到选择的数量-->
                        <!--1、经过分析，按钮属于goodsinfo页面，数字属于numberbox组件
                            2、由于涉及到了父子组件的嵌套了，所以，无法直接在goodsinfo页面中获取到选中的商品数量值
                            3、怎么解决这个问题：涉及到了子组件向父组件传值了（事件调用机制）
                            4、事件调用的本质：父向子传递方法，子调用这个方法，同时把数据当做参数 传递给这个方法
                        -->
                    </p>
                </div>
            </div>
        </div>
        <!--商品参数区域-->
        <div class="mui-card">
        <div class="mui-card-header">页眉</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
            </div>
        </div>
    </div>
    </div>

</template>

<script>
    import swiper from '../subcomponents/swiper.vue'
    import numbox from '../subcomponents/goodsinfo_numbox.vue'
    export default {
        name: "goods-info",
        data(){
            return{
                id:this.$route.params.id,//将路由参数对象中的id挂载到data，方便后期调用
                goodsinfoList:[],
                ballFlag:false,//控制小球隐藏和显示的标识符
                selectedCount:1//保存用户选中的商品数量，默认，用户买一个
            }
        },
        components:{
            swiper,
            numbox
        },

        created(){
          this.getLunbotu()
        },
        methods:{
            getLunbotu(){
                this.$http.get("http://192.168.1.237:9090/test33/test.php").then(result=>{
                        if(result.body.code==0){
                            result.body.goodlist.forEach(item=>{
                                if (item.id==this.id){
                                    this.goodsinfoList=item
                                }
                            })
                        }
                })
            },
            addToShopCar(){
                //添加到购物车
                this.ballFlag=!this.ballFlag
                //{id:商品的id，count:要购买的数量，price:商品的单价，selected:false}
                //拼接出一个，要保存到store中car数组里的商品信息对象
                var goodsinfo={id:this.id,count:this.selectedCount,price:this.goodsinfoList.sell_price,selected:true}
                //调用state中的addToCar方法，把数据添加进去
                this.$store.commit('addToCar',goodsinfo)
            },
            beforeEnter(el){
                el.style.transform="translate(0,0)"
            },
            enter(el,done){
                el.offsetWidth;

                //小球动画优化思路：
                //1.先分析导致 动画不准确的 本质原因：我们把小球最终位移到的位置，已经局限在了
                //某一分辨率下的，滚动条未滚动的情况下：
                //2.只要分辨率和测试的时候不一样，或者 滚动条有一定的滚动距离之后，问题就出现了；
                //3.因此，我们经过分析，得出结论：不能把位置的横纵坐标直接写死了，而是应该根据不同情况，动态计算这个坐标值
                //4.经过分析，得出解决思路，让先得到徽标的横纵坐标，在得到小球的横纵坐标，然后，让y值求差，x值也求差，得到结果，就是横纵坐标要位移的距离
                //5.如何获取徽标和小球的位置？？domobject.getboundingclientrect()

                //获取小球的在页面中的位置
                const ballPosition=this.$refs.ball.getBoundingClientRect();
                const badgePosition=document.getElementById("badge").getBoundingClientRect();
                const xDist=badgePosition.left-ballPosition.left;
                const yDist=badgePosition.top-ballPosition.top;
                el.style.transform=`translate(${xDist}px,${yDist}px)`
                el.style.transition="all 0.5s cubic-bezier(.4,-0.3,1,.68)"
                done()
            },
            afterEnter(el){
                this.ballFlag=!this.ballFlag
            },
            getSelectedCount(count){
                //当子组件把选中的数量传递给父组件时，把选中的值保存到data上
                this.selectedCount=count;
                console.log('当前数值：'+this.selectedCount)
            }
        }
    }
</script>

<style scoped lang="scss">
.ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;z-index: 99;
    left:146px;
    top:510px;
}
.goodsinfo-container{
    background-color: #eee;
    overflow: hidden;
}

.mint-swipe{
    height: 320px;
}
    .now_price{
        color: red;
        font-size: 16px;
        font-weight: bold;
    }
</style>